<template>
  <div class="premium-dashboard">
    <!-- 主要内容区域 -->
    <main class="dashboard-main">
      <!-- 顶部工具栏 -->
      <header class="top-toolbar">
        <div class="toolbar-left">
          <div class="logo-section">
            <div class="logo-icon">🛡️</div>
            <div class="logo-text">
              <h1 class="app-title">DNS Security Monitor</h1>
              <p class="app-subtitle">实时安全态势感知平台</p>
            </div>
          </div>
        </div>
        <div class="toolbar-right">
          <div class="status-indicators">
            <div class="indicator active">
              <div class="indicator-dot"></div>
              <span>在线监控</span>
            </div>
            <div class="update-info">
              <span class="update-label">最后更新</span>
              <span class="update-time">{{ formatTime(updateTime) }}</span>
            </div>
          </div>
        </div>
      </header>

      <!-- 仪表板内容 -->
      <div class="dashboard-content">
        <!-- 主要布局区域 -->
        <div class="main-layout">
          <!-- 左侧区域：统计和地图 -->
          <div class="left-section">
            <!-- 顶部统计数据 -->
            <div class="stats-section">
              <div class="stats-header">
                <h3 class="stats-title">
                  <span class="title-icon">📈</span>
                  实时统计概览
                </h3>
              </div>
              <div class="stats-content">
                <DetailDataDaily />
              </div>
            </div>

            <!-- 地图区域 -->
            <div class="map-section">
              <div class="panel map-panel">
                <div class="panel-header map-header-simple">
                  <h3 class="panel-title">
                    <span class="title-icon">🗺️</span>
                    全国DNS递归服务器安全态势
                  </h3>
                </div>
                <div class="panel-content map-content">
                  <div class="map-container">
                    <ChinaMap />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧图表区域 -->
          <div class="right-section">
            <!-- 排名表格 -->
            <div class="panel ranking-panel">
              <div class="panel-content">
                <RankChart />
              </div>
            </div>

            <!-- 安全分析 -->
            <div class="panel analysis-panel">
              <div class="panel-content">
                <DnssecErrorChart />
              </div>
            </div>

            <!-- 协议支持 -->
            <div class="panel protocol-panel">
              <div class="panel-content">
                <DnssecDotDoh />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import DetailDataDaily from '@/components/DetailDataDaily.vue'
import ChinaMap from '@/components/ChinaMap.vue'
import RankChart from '@/components/RankChart.vue'
import DnssecErrorChart from '@/components/DnssecErrorChart.vue'
import DnssecDotDoh from '@/components/DnssecDotDoh.vue'

export default {
  name: 'DashboardSimple',
  components: {
    DetailDataDaily,
    ChinaMap,
    RankChart,
    DnssecErrorChart,
    DnssecDotDoh
  },
  data() {
    return {
      updateTime: new Date()
    }
  },
  mounted() {
    this.updateCurrentTime()
    this.timer = setInterval(this.updateCurrentTime, 1000)
  },
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    updateCurrentTime() {
      this.updateTime = new Date()
    },
    formatTime(date) {
      return date.toLocaleString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.premium-dashboard {
  width: 100%;
  min-height: 100vh;
  background: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #f8fafc;
}

/* 主内容区 */
.dashboard-main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #1e293b;
}

/* 顶部工具栏 */
.top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #334155;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 50;
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.app-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #f8fafc;
}

.app-subtitle {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 20px;
}

.indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 20px;
  font-size: 13px;
  color: #22c55e;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.update-info {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.update-label {
  font-size: 11px;
  color: #94a3b8;
}

.update-time {
  font-size: 13px;
  color: #f8fafc;
  font-family: 'Courier New', monospace;
}



/* 仪表板内容 */
.dashboard-content {
  flex: 1;
  width: 100%;
  padding: 24px;
  overflow: auto;
  box-sizing: border-box;
}

/* 主要布局 */
.main-layout {
  display: flex;
  gap: 24px;
  height: calc(100vh - 140px);
  min-height: 750px;
}

/* 左侧区域 */
.left-section {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 统计区域 */
.stats-section {
  flex: 2;
  min-height: 0;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.stats-header {
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
  background: rgba(51, 65, 85, 0.3);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.stats-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}



.stats-content {
  flex: 1;
  padding: 16px 20px;
  overflow: hidden;
  min-height: 0;
}

/* 地图区域 */
.map-section {
  flex: 7;
  min-height: 0;
}

/* 右侧区域 */
.right-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 面板样式 */
.panel {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  height: 100%;
}

.panel:hover {
  border-color: #667eea;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  background: rgba(51, 65, 85, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 16px;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.panel-action {
  width: 32px;
  height: 32px;
  background: rgba(51, 65, 85, 0.5);
  border: 1px solid #475569;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-action:hover {
  background: rgba(51, 65, 85, 0.8);
  color: #f8fafc;
  border-color: #667eea;
}

.panel-content {
  flex: 1;
  padding: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 右侧面板特殊处理 - 更少padding */
.right-section .panel-content {
  padding: 2px;
}

/* 地图面板 */
.map-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.map-header-simple {
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  background: rgba(51, 65, 85, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-content {
  position: relative;
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.map-container {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
}



/* 右侧面板 */
.ranking-panel {
  flex: 2;
  min-height: 350px;
}

.analysis-panel {
  flex: 1.5;
  min-height: 250px;
}

.protocol-panel {
  flex: 1.5;
  min-height: 250px;
}

/* 动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-card,
.panel {
  animation: fadeInUp 0.6s ease-out forwards;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }
.metric-card:nth-child(4) { animation-delay: 0.4s; }

/* 响应式设计 */
@media (max-width: 1600px) {
  .charts-area {
    width: 380px;
  }
  
  .stats-panel-container {
    width: 320px;
  }
}

@media (max-width: 1400px) {
  .main-layout {
    flex-direction: column;
    height: auto;
  }
  
  .left-section {
    flex: none;
    height: auto;
  }
  
  .right-section {
    flex: none;
    flex-direction: row;
    height: auto;
    gap: 16px;
  }
  
  .ranking-panel,
  .analysis-panel,
  .protocol-panel {
    flex: 1;
    min-height: 300px;
  }
}

@media (max-width: 1200px) {
  .right-section {
    flex-direction: column;
    gap: 16px;
  }
  
  .ranking-panel,
  .analysis-panel,
  .protocol-panel {
    flex: 1;
    min-height: 250px;
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    width: 100%;
    margin-left: 0;
  }
  
  .top-toolbar {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .toolbar-right {
    flex-direction: column;
    gap: 16px;
  }
  
  .map-header {
    gap: 8px;
    padding: 12px 16px;
  }
  
  .map-container {
    padding: 12px;
  }
  
  .map-legend {
    bottom: 12px;
    left: 12px;
    padding: 8px 12px;
    gap: 8px;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(51, 65, 85, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8);
}
</style> 